<p class="_masonry-class" id="topmain">
    <a (click)="changeLink()" [ngClass]="{active: pubu}" href="javascript:;" id="1">材料</a><span>|</span>
    <a (click)="changeLink2()" [ngClass]="{active: pubu2}" href="javascript:;" id="2">制造厂</a>
</p>

<div id="masonry1" [hidden]="!pubu" class="_masonry" >
  <div class="pubu">
    <div  class="_masonry-box" *ngFor="let mat of facinfro.material">
      <a (click)="gomatrialdetial(mat.id)">
        <img class="_box-img" [src]="mat.url"/>
      </a>
      <div class="_box-intro">
        <p class="_box-name">{{mat.name}}</p>
        <div class="_box-place">
          <div class="_box-place-l">{{mat.city}}</div>
          <div class="_box-place-r"><span class="glyphicon glyphicon-heart"></span>{{mat.num}}</div>
        </div>
        <p class="_box-class"><{{mat.catename}}></p>
      </div>
    </div>
  </div>
</div>
<div id="masonry2"  [hidden]="!pubu2" class="_masonry">
  <div  class="_masonry-box _masonry-box2" *ngFor=" let mate of facinfro.factory" style="float: left;margin-right: 10px;">
  <a (click)="gofacdetail(mate.id)">
    <img class="_box-img" height="96px" [src]="mate.url" />
  </a>
  <div class="_box-twoimg">
    <div class="_box-twoimg-l"><img [src]="mate.url"></div>
    <div class="_box-twoimg-r"><img [src]="mate.url"></div>
  </div>
  <div class="_box-intro">
    <p class="_box-name">{{mate.factory}}</p>
    <div class="_box-place">
      <div class="_box-place-l">{{mate.city}}</div>
      <div class="_box-place-r"><span class="glyphicon glyphicon-heart"></span>{{mate.num}}</div>
    </div>
    <p class="_box-class"><{{mate.catename}}></p>
  </div>
</div>
</div>

<div (click)="rShow()" [hidden]="!rightsh" style="position: absolute;top: 0;left: 0;bottom: 0;right: 0;opacity: 0;"></div>
<!--筛选条件、地图图标保持fixed-->
<div class="_fixed">
    <div class="_fixed-filter">
        <img (click)="rShow()" src="assets/img/icon/filter.png" />
        <div (click)="rShow()"  [ngClass]="{show: rightsh}" class="_filter" >
            <div class="_filter-arrow"></div>
            <ul>
                <li>
                    <p><span></span>制造厂规模<i class="fa fa-angle-down" aria-hidden="true"></i></p>
                    <ul>
                        <li class="active" (click)="serchlist('手艺人个体')">
                            <p><span></span>手艺人个体</p>
                        </li>
                        <li (click)="serchlist('手艺人个体')">
                            <p><span></span>手工艺作坊</p>
                        </li>
                        <li (click)="serchlist('手艺人个体')">
                            <p><span></span>设计师工作室</p>
                        </li>
                        <li (click)="serchlist('手艺人个体')">
                            <p><span></span>工厂</p>
                        </li>
                    </ul>
                </li>
                <!--<li class="active">-->
                    <!--<p><span></span>按离我最近排序</p>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<p><span></span>按最受欢迎排序</p>-->
                <!--</li>-->
            </ul>
        </div>
    </div>
    <div class="_fixed-map">
        <a  routerLink="/linkMap"><img src="assets/img/icon/map.png" /></a>
    </div>
</div>
